<template>
  <div id="salarySheet">
    <div class="pageHead">
      <el-form :model="form" class="left">
        <el-form-item>
          <el-date-picker class="maxSelect" v-model="form.yearMonth" type="month" placeholder="请选择月份" value-format="yyyy-M" :clearable="false"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.subId" class="maxSelect" clearable filterable>
            <el-option v-for="item in companyList" :key="item.subid" :value="item.subid" :label="item.subName"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="onSearch" :loading="loading">查询</el-button>
      </el-form>
      <div class="right">
        <el-button type="primary" @click="isAddPop = true" :loading="operationLoading.GenerateWages">添加工资表</el-button>
      </div>
    </div>
    <div class="pageMain" v-loading="loading">
      <el-table :data="tableData" height="100%">
        <el-table-column prop="name" label="工资名称" />
        <el-table-column prop="" label="所属公司">
          <template slot-scope="{ row }">
            {{ handleCompany(row) }}
          </template>
        </el-table-column>
        <el-table-column prop="peopleNumber" label="工资人数" />
        <el-table-column prop="yfWages" label="应发工资" />
        <el-table-column prop="taxPayable" label="应纳税额" />
        <el-table-column prop="sfWages" label="实发工资" />
        <el-table-column label="工资表模板" min-width="90">
          <template slot-scope="{ row }">
            {{ handleTemplate(row) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="onWrite(row)">填写</el-button>
            <el-button type="text" size="small" @click="onDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <salary-sheet-pop :is-pop.sync="isAddPop" :tem-arr.sync="temArr" @next="onNext"></salary-sheet-pop>
  </div>
</template>
<script>
import { getCompanyList } from "@/util/xc/utils";
import { mapState } from "vuex";
import salarySheetPop from "./components/salarySheetPop.vue";
import eventBus from './eventBus/eventBus';
export default {
  components: { salarySheetPop },
  name: "salarySheet",
  data() {
    return {
      form: {
        yearMonth: (() => {
          const date = new Date();
          const year = date.getFullYear();
          const month = date.getMonth() + 1;
          return `${year}-${month}`;
        })()
      },
      tableData: [],
      isAddPop: false,
      loading: false,
      temArr: []
    };
  },
  computed: {
    ...mapState({
      companyList: state => state.reward.companyList,
      operationLoading: state => state.setStorage.operationLoading
    })
  },
  methods: {
    // 列表数据处理
    ...{
      handleCompany(row) {
        return this.companyList.find(item => item.subid == row.subId)?.subName || "";
      },
      handleTemplate(row) {
        return this.temArr.find(item => item.id == row.salaryTId)?.name || "";
      }
    },
    async onNext(data) {
      this.onWrite(data);
      this.getTableData();
    },
    onWrite(row) {
      const data = row ? { id: row.id, subId: row.subId } : {};
      this.$router.push({
        name: "salaryDetails",
        query: {
          ...data,
          random: Math.random()
        }
      });
    },
    async onDelete(row) {
      this.$confirm("确认删除吗", "提示", {}).then(async () => {
        try {
          this.loading = true;
          const { id, subId } = row;
          const { message = "删除成功" } = await this.$api.smartSalary.removeWages({ id, subId }).then(res => res.data);
          await this.getTableData();
          this.$message({ message, type: "success" });
        } catch {
          this.$message({ message: "删除失败", type: "error" });
        } finally {
          this.loading = false;
        }
      });
    },
    onSearch() {
      this.getTableData();
    },
    getYearMonth() {
      const { yearMonth = "", subId = "" } = this.form;
      const [year = "", month = ""] = yearMonth.split("-");
      return { year, month, subId };
    },
    async getTableData() {
      const { year, month, subId } = this.getYearMonth();
      const params = {};
      if (year) params.year = year;
      if (month) params.month = month;
      if (subId) params.subId = subId;
      try {
        this.loading = true;
        const { data } = await this.$api.smartSalary.getWagesList(params).then(res => res.data);
        this.tableData = data;
      } finally {
        this.loading = false;
      }
    },
    async getOtherData() {
      const { data } = await this.$api.smartSalary.getSalaryTemplates({}).then(res => res.data);
      this.temArr = data;
    },
    initData() {
      this.getOtherData();
      this.getTableData();
    }
  },
  mounted() {
    this.initData();
    getCompanyList();
    eventBus.$on("GenerateWages", ()=>{
      this.getTableData();
    });
  },
  activated() {
    this.getTableData();
  },
  destroyed() {
    eventBus.$off();
  },
};
</script>
<style lang="less" scoped>
#salarySheet {
  .pageHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left,
    .right {
      display: flex;
      align-items: center;
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }
  .maxSelect {
    width: 200px;
  }
  .el-form {
    .el-form-item {
      margin-right: 20px;
    }
  }

  .el-button {
    margin-left: 0;
  }
}
</style>
